<template>
<div>
	<div>
		<Alert v-if="order.info.status==2" show-icon>订单已关闭</Alert>
		<circle-steps v-else :step="step" :steps="steps"></circle-steps>
	</div>

	<Timeline mgt5>
		<Alert v-if="errors.length>0" type="warning" show-icon>
			<p v-for="(error, index) in errors" :key="index">{{error}}</p>
		</Alert>
        <TimelineItem v-for="(item, index) in logs" :key="index" color="green">
            <Icon type="ios-arrow-dropup-circle" slot="dot"></Icon>
			<span mgr2>{{item.time}}</span>
            <span>{{item.description}}</span>
        </TimelineItem>
    </Timeline>

	<div class="bigtitle" mgt5>
		<div class="bigtitle-title" nobd>订单基本信息</div>
        <div right>
            <span v-if="canCancelOrder(order)" @click="handleCancelOrder(order.orderNumber)" linkable>取消订单</span>
            <span v-if="canPaymentOrder(order)" bg-red-linkable white pd1 mgl2 @click="handleGoPayment(order.orderNumber)">去支付</span>
        </div>
	</div>

	<p mgt2>订单状态：{{getOrderStatus(order)}}</p>
	<p mgt2>应付金额：<span red>￥{{formatPrice(order.info.totalAmount)}}</span></p>
	<p mgt2>订单编号：{{order.orderNumber}}</p>
	<p mgt2>创建时间：{{formatTimeStr(order.info.creationTime)}}</p>

	<div class="bigtitle" mgt5>
		<div class="bigtitle-title" nobd>收货信息</div>
	</div>
	<p mgt2>收货人：{{order.shipInfo.personName}}</p>
	<p mgt2>手机：{{order.shipInfo.phoneNumber}}</p>
	<p mgt2>收货地址：{{order.shipInfo.address}}</p>


	<div class="bigtitle" mgt5>
		<div class="bigtitle-title" nobd>支付及配送方式</div>
	</div>
	<p mgt2>支付方式：{{getPaymentType(order)}}</p>
    <p mgt2>配送方式：{{order.shipInfo.expressName}}</p>

	<div class="bigtitle" mgt5 nobd>
		<div class="bigtitle-title" nobd sz1>商品清单和结算信息 </div>
	</div>
    <table border="0" cellspacing="0" cellpadding="0" class="minitable-empty" long mgt2>
        <tr>
            <th pd2 text-left>商品名称</th>
            <th pd2>单价(元)</th>
            <th pd2>数量</th>
            <th pd2>赠送积分</th>
            <th pd2>小计(元)</th>
        </tr>
        <tr v-for="(item, index) in order.details" :key="index">
            <td pd2>
				<order-detail-profile :detail="item"></order-detail-profile>
            </td>
            <td w5 pd2 text-center>{{item.price}}</td>
            <td w5 pd2 text-center>x{{item.count}}</td>
            <td w5 pd2 text-center>{{item.xpValue*item.count}}</td>
            <td w5 pd2 text-center>{{item.totalAmount}}</td>
        </tr>
        <tr>
            <td colspan="5" pd2>
				<span>买家留言：</span>
				<span>{{ order.info.remark || '暂无' }}</span>
			</td>
        </tr>
        <tr>
            <td colspan="5" pd2>订单优惠：{{order.info.couponId?order.info.couponProfile:'无'}}；积分抵现（已抵用￥{{formatPrice(order.info.xpAmount)}}）</td>
        </tr>
        <tr>
            <td colspan="5" pd2 text-right>
                <p>
					<span>商品总金额：</span>
					<span inline-block w4>¥{{formatPrice(order.info.commodityTotalAmount)}}</span>
				</p>
                <p>
					<span>运费：</span>
					<span inline-block w4 red>¥{{formatPrice(order.info.freightAmount)}}</span>
				</p>
                <p>
					<span>优惠：</span>
					<span inline-block w4 red>-¥{{formatPrice(order.info.couponAmount + order.info.xpAmount)}}</span>
				</p>
                <p>
					<span>总计：</span>
					<span inline-block w4 red>¥{{formatPrice(order.info.totalAmount)}}</span>
				</p>
                <p>
					<span>赠送积分：</span>
					<span inline-block w4>{{order.info.bounsXPValue}}</span>
				</p>
            </td>
        </tr>
    </table>

	<div v-if="order.info.status==1">
		<div class="bigtitle" mgt5 nobd>
			<div class="bigtitle-title" nobd sz1>订单评价</div>
		</div>
		<div v-if="order.evaluateInfo.description" bd-gray4 bg-gray5 pd4>
			<p lh1 long>
				<span left bg-cover bd-gray3 bd-circle h1 w1 mgr2 :style="{'background-image':`url(${member.head})`}"></span>
				<span mgr2>{{member.userName}}</span>
				<span gray3 mgr2>{{formatTimeStr(order.evaluateInfo.evaluateTime)}}</span>
				<span mgr2>订单号：{{order.orderNumber}}</span>
				<Rate v-model="order.evaluateInfo.rateValue" disabled />
			</p>
			<div v-html="order.evaluateInfo.description" mgt2></div>
			<div mgt2>
				<span v-for="(pic, index) in order.evaluateInfo.pictures" :key="index" inline-block bg-cover bd-gray4 h3 w3 mgr2 
					:style="{'background-image':`url(${pic})`}" linkable @click="viewPicture(pic)"></span>
			</div>
		</div>
		<div v-else bd-gray4 bg-gray5>
			<Form ref="order-detail-form" :label-width="100" mgt3 mgr4>
				<FormItem label="综合评分">
					<Rate v-model="evaluationModel.rateValue" />
				</FormItem>
				<FormItem label="评价内容" prop="content" required>
					<Input v-model="evaluationModel.content" type="textarea" :rows="4"/>
				</FormItem>
				<FormItem label="评价图片">
					<picture-box v-model="evaluationModel.pictures"></picture-box>
				</FormItem>
				<FormItem>
					<Button size="small" type="primary" @click="handleEvaluate">发表评价</Button>
				</FormItem>
			</Form>
		</div>
	</div>
    
</div>
</template>

<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import OrderBase from './OrderBase';
import CircleSteps from '../../../components/common/circle-steps.vue'
import PictureBox from '@common/components/picture-box.vue';
import { locale } from 'moment';
import OrderDetailProfile from '../../../components/common/order-detail-profile.vue'

@Component({
    components: { CircleSteps, PictureBox, OrderDetailProfile }
})
export default class OrderDetail extends OrderBase{
	evaluationModel:any = {
		orderNumber: null,
		rateValue: 0,
		content: "",
		pictures: []
	}
	get member() {
		return this.$store.state.self.member;
	}
	get steps():Array<string> {
		if(this.order.info.status != 2) {
			return [
				"订单已提交",
				"付款成功",
				"商品出库",
				"等待收货",
				"完成"
			];
		}else {
			return [
				"订单已提交",
				"订单已关闭"
			];
		}
	}
	get step():Number {
		var order = this.order;
		if(order.info.status == 0) {
			// 订单已创建
			if(order.paymentInfo.paymentType == 0 || order.paymentInfo.paymentType == 2) {
				if(order.shipInfo.shipStatus == 0) {
					return [1, 1, 2, 2, 2, 3][order.paymentInfo.paymentStatus];
				}else {
					return [1, 3, 4, 4, 5, 5, 5][order.shipInfo.shipStatus];
				}
			}else if(order.paymentInfo.paymentType == 1) {
				//if(order.shipInfo == )
			}
		}else if(order.info.status == 1) {
			// 交易成功
			return 5;
		}else if(order.info.status == 2) {
			// 交易关闭
			return 2;
		}
	}
	order:any = {
		info: {},
		shipInfo: {},
		paymentInfo: {}
	}
	logs = []
	errors= []
	async getOrder(orderNumber:string) {
		var response = await this.get('Order/Get', { orderNumber: orderNumber });
		if(response.success) {
			this.order = response.result;
		}
	}
	async getLogs(orderNumber) {
		var response1 = await this.get('Order/GetAllOrderLogs', { orderNumber: orderNumber });
		if(!response1.success) return [];
		var response2 = await this.get('Order/GetOrderWuliu', { orderNumber: orderNumber });
		if(!response2.success) return [];
		if(response2.result.error) {
			this.errors = response2.result.errors;
		}

		var arr1 = response1.result.map(elem => {
			return {
				_time: new Date(elem.creationTime).getTime(),
				time: this.formatTimeStr(elem.creationTime),
				description: elem.description
			}
		});
		var arr2 = response2.result.items.map(elem => {
			return {
				_time: new Date(elem.time).getTime(),
				time: this.formatTimeStr(elem.time),
				description: elem.description
			}
		}) || [];

		var arr = arr1.concat(arr2);
		this.logs = arr.sort((a, b) => {
			return b._time - a._time;
		});
	}
	handleEvaluate() {
		(this.$refs["order-detail-form"] as any).validate( async (valid) => {
			if (valid) {
				var response = await this.post('Order/EvaluateOrder', this.evaluationModel);
				if(response.success) {
					location.reload();
				}
			}
		});
	}
	created() {
		var orderNumber = this.$route.params.ordernumber;
		if(orderNumber) {
			this.evaluationModel.orderNumber = orderNumber;
			this.getOrder(orderNumber);
			this.getLogs(orderNumber);
		}
	}
}
</script>